<template>
	<view>
		<view class="addressInfo">
			<view class="top">
				<view class="title">地址信息</view>
			</view>
			<view @click="editAddress">
				<view class="user">
					<text v-if="addressInfo.add_id">{{addressInfo.name}} {{addressInfo.phone}}</text>
					<text v-else style="color: #8e8e8e;">请选择或新建地址</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<text class="address" v-if="addressInfo.add_id">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.address}}</text>
				<view class="line" v-else> </view>
			</view>
			<view class="warning">
				<u-icon name="warning-fill" color="#d81e06"></u-icon>
				<span>因物流成本原因，上门服务地区暂不包括：西藏、新疆、青海、甘肃、内蒙古、宁夏、黑龙江、港澳台。</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "AddressInfo",
		data() {
			return {
				addressInfo:{
						name:'',
						phone:'',
						province:'',
						city:'',
						district:'',
						address:''
				}
			};
		},
		props:{
			info:Object
		},
		methods: {
			// 点击选择地址
			editAddress() {
				uni.navigateTo({
					url: '/page_mine/Address',
				});
			},
		},
		created() {
			this.addressInfo = this.info
			console.log(this.addressInfo);
		},
		watch: {
			info(newV, oldV) {
				this.addressInfo = newV
				console.log(this.addressInfo);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressInfo {
		margin: 40rpx 20rpx;
		padding: 0 20rpx;
		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
			}
		}

		.user {
			display: flex;
			justify-content: space-between;
			color: #666666;
		}

		.address {
			font-size: smaller;
			color: #666666;
		}

		.line {
			height: 1px;
			background-color: lightgray;
			margin-top: 30rpx;
		}


		.warning {
			margin-top: 20rpx;
			font-size: small;
			color: #8a8a8a;
			display: flex;

			/deep/ .u-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
